<template>
  <div>
    <div class="details-rec-sku-name">三宅一生（ISSEY MIYAKE）一生之水女士淡香水25ml（EDT香水 花香水香木香 经典 进口）</div>
    <div class="details-rec-news">
      ISSEYMIYAKE三宅一生，礼遇香氛，浪漫邂逅。
      <a href>7.1-7.31，满399减80，满499减100</a>
    </div>
    <!--价钱 -->
    <div class="details-rec-summary details-rec-summary-first">
      <MiddlePrice />
    </div>
    <!-- 配送 -->
    <div class="details-rec-stock">
      <div class="details-rec-dt dt">配 送 至</div>

      <div class="details-rec-stock-address">
        <div class="details-rec-area-wrap">
          <div class="details-rec-text-wrap">
            <div class="details-rec-add-text">江苏徐州市铜山区伊庄镇</div>
            <b></b>
          </div>
        </div>
      </div>
      <div class="details-rec-store-prompt">
        <strong>有货</strong>
      </div>
      <div class="details-rec-promise-support fl">
        <div class="details-rec-support">支持</div>
        <div class="details-rec-support-list">
          <a href>次日达</a>
          <a href>自提</a>
          <a href>闪电退款</a>
          <a href>99元免基础运费(10kg内)</a>
        </div>
      </div>
    </div>
    <div class="details-rec-cls">
      <div class="details-rec-summary-service">
        由
        <span>京东</span>
        发货, 并提供售后服务. 16:00前下单，预计
        <b>明天(07月16日)</b>
        送达
      </div>
    </div>
    <!-- 重量 -->
    <div class="details-rec-weight">
      <div class="details-rec-dt">重 量</div>
      <div class="details-rec-kg">0.16kg</div>
    </div>
    <!-- 虚线 -->
    <div class="details-rec-summary-line"></div>
    <!-- 选择产品 -->
    <div class="details-rec-choose">
      <MiddleSelect />
    </div>
    <!-- 增值保障 -->
    <div class="details-rec-choose-service">
      <MiddleZengZhi />
    </div>
    <!-- 白条 -->
    <div class="details-rec-choose-baitiao">
      <MiddleBaiTiao />
    </div>

    <!-- 虚线 -->
    <div class="details-rec-summary-line"></div>
    <!-- 按钮 -->
    <div class="details-rec-choose-btns">
      <MiddBtn />
    </div>
  </div>
</template>
<script>
import MiddleBaiTiao from "./MiddleBaiTiao";
import MiddleZengZhi from "./MiddleZengZhi";
import MiddleSelect from "./MiddleSelect";
import MiddlePrice from "./MiddlePrice";
import MiddBtn from "./MiddleBtn";
export default {
  components: {
    MiddleBaiTiao,
    MiddleZengZhi,
    MiddleSelect,
    MiddlePrice,
    MiddBtn
  }
};
</script>

<style scoped>
.details-rec-sku-name {
  font: 700 16px Arial, "microsoft yahei";
  color: #666;
  padding-top: 10px;
  line-height: 28px;
  margin-bottom: 5px;
}
.details-rec-news {
  color: #e4393c;
  margin-bottom: 5px;
  font-size: 12px;
}
.details-rec-news a {
  text-decoration: underline;
  color: #5e69ad;
  font-size: 12px;
}
/* 价钱样式开始  */
.details-rec-summary {
  position: relative;
  padding-bottom: 5px;
}

/* 京东价样式开始 */

/* 配送地址开始 */
.details-rec-stock {
  overflow: hidden;
  width: 590px;
  height: 48px;
}
.details-rec-stock-address {
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
.details-rec-area-wrap {
  position: relative;
  z-index: 3;
  height: 26px;
  margin-right: 6px;
}
.details-rec-text-wrap {
  float: left;
  position: relative;
  top: 0;
  height: 23px;
  background: #fff;
  border: 1px solid #cecbce;
  padding: 0 24px 0 4px;
  line-height: 23px;
  overflow: hidden;
}
.details-rec-add-text {
  font-size: 12px;
  color: #666;
}
.details-rec-text-wrap b {
  display: block;
  position: absolute;
  top: 3px;
  right: 4px;
  width: 17px;
  height: 17px;
  background: url(../../../../assets/img/details/59088392N8b6279bb.png)
    no-repeat 3px 5px;
  overflow: hidden;
}

.details-rec-store-prompt {
  margin-top: 10px;
  margin-right: 10px;
  color: #999;
  height: 24px;
  float: left;
}
.details-rec-store-prompt {
  margin-right: 5px;
  /* float: left; */
  font-size: 12px;
}

.details-rec-promise-support {
  height: 24px;
  position: relative;
  left: 70px;
  overflow: hidden;
}
.details-rec-support {
  margin-right: 5px;
  color: #666;
  font-size: 12px;
  float: left;
}
.details-rec-support-list {
  position: relative;
  top: -2px;
  height: 20px;
  overflow: hidden;
  margin-left: 28px;
}
.details-rec-support-list a {
  color: #646fb0;
  float: left;
  overflow: hidden;
  font-size: 12px;
  margin-top: 2px;
  margin-bottom: 5px;
  padding: 0 10px;
  border-right: 1px solid #eaeaea;
  white-space: nowrap;
}
.details-rec-cls {
  clear: both;
}
.details-rec-weight {
  margin-bottom: 3px;
  line-height: 32px;
  display: block;
}
.details-rec-summary-service {
  position: relative;
  top: 5px;
  left: 70px;
  font-size: 12px;
  color: #999;
  margin-bottom: 3px;
  line-height: 32px;
}
.details-rec-summary-service span {
  color: #e4393c;
}

.details-rec-kg {
  /* position: relative;
  top: 9px; */
  margin-left: 70px;
  font-size: 12px;
  color: #666;
}

.details-rec-summary-line {
  overflow: hidden;
  height: 0;
  overflow: hidden;
  border-bottom: 1px dotted #dfdfdf;
  margin-bottom: 15px;
}
/* 选择产品 */
.details-rec-choose {
  line-height: 40px;
  margin-bottom: 3px;
  display: block;
}

/* 增值保障开始 */
.details-rec-choose-service {
  overflow: hidden;
  margin-bottom: 7px;
  line-height: 18px;
  display: block;
  width: 593px;
}

/* 白条样式开始 */
.details-rec-choose-baitiao {
  margin-bottom: 3px;
  line-height: 32px;
  display: block;
  width: 590px;
  height: 77px;
}
/* 按钮开始 */
.details-rec-choose-btns {
  margin-top: 10px;
  /* margin-bottom: 20px; */
  padding: 0 10px;
  
}
</style>